<template>
	<view class="cate_container flow_h">
		<template v-if="permission">
			<navigator :url="noLogin?'/pages/account/pages/login':'/pages/goods/pages/search'" hover-class="none" class="bc_fff bob_1 box boc_grey" id="search-bar">
				<uni-search-bar radius="16" placeholder="输入商品分类、名称" readonly v-model="searchValue" cancelButton="none">
				</uni-search-bar>
			</navigator>
			<view class="fx bc_fff">
				<!-- 左侧滑动区域 -->
				<scroll-view class="pr bc_f6 width_96 fx_sh" scroll-y="true" :style="{height: windowHeight+'px'}"
					:scroll-into-view="scrollLeftId" :scroll-with-animation="true" @scroll="onLeftScroll">
					<view id="left-scroll">
						<view class="active_block box width_96 height_56" id="active" :style="[blockStyle]"></view>
						<block v-for="(item,index) in cateList" :key="index">
							<view class="pr box left_item height_56 lh_56  pr mlr_8 public-text-one fc"  :id="'left-item-'+index"
								@click="handleClickLeft(item,index)">
								{{item.typeName||''}}
							</view>
						</block>
					</view>
				</scroll-view>
				<!-- 右侧滑动区域 -->
				<scroll-view ref="rightRef" class="fx_1" scroll-y="true" enable-flex :style="{height: windowHeight+'px'}"
					@scrolltolower="onRightBottom" @scrolltoupper="onRightTop" :scroll-top="rightScrollTop"
					:scroll-with-animation="true">
					<view id="right-top"></view>
					<view id="right-scroll">
						<view class="fx aic jcc mt_16">
							<view class="width_24 height_1 bc_999"></view>
							<view class="fz_16 fb plr_8">
								{{cateList[active].typeName||''}}
							</view>
							<view class="width_24 height_1 bc_999"></view>
						</view>
						<view class="fx fx_col aic pb_16">
							<view class="mt_12 fx fx_w grid_12 width_264">
								<view class="fx fx_col aic flow_h" v-for="item,index in cataLevel2" :key="index"
									@click="handleType(item)">
									<CusImage width="160rpx" height="160rpx" radius="24rpx"
										:src="item.typeIconUrl" mode="aspectFit" />
									<view class="mt_4 fz_12 fe width_80 fc">
										{{item.typeName||''}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
		<template v-else>
			<NoPermission :requestCount="requestCount" :ossUrl="ossUrl" :basicUnserInfo="basicUnserInfo" />
		</template>
	</view>
</template>

<script>
	import api from '@/service/config/api'
	import CusImage from '@/components/Image'
	import permissionMixin from '@/mixins/permission.js'
	import NoPermission from "@/components/noPermission.vue"
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		mixins: [permissionMixin],
		components: {
			CusImage,
			NoPermission
		},
		data() {
			return {
				//当前设备可用高度
				windowHeight: 0,
				//分类列表
				cateList: [],
				active: 0,
				//二级分类列表
				cataLevel2: [],
				scrollTop: 0,
				searchValue: '',
				itemTop: 0,
				blockTop: 0,
				searchHeight: uni.upx2px(114),
				scrollLeftId: '',
				scrollRightId: '',
				leftScrollTop: 0,
				leftScrollHeight: 0,
				rightScrollTop: 0,
				timer: null,
				timer1: null,
				loading: false,
				disabled: false
			};
		},
		computed: {
			...mapGetters(['noLogin']),
			blockStyle() {
				return {
					top: this.blockTop + 'px'
				}
			},
		},
		onLoad() {
			this.getCateList()
			uni.createSelectorQuery().in(this).select('#search-bar').boundingClientRect(data => {
				this.searchHeight = data.height
			}).exec()
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight - this.searchHeight
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select(`#left-scroll`).boundingClientRect(data => {
					this.leftScrollHeight = data.height
				}).exec()
			})
		},
		onUnload() {
			clearTimeout(this.timer)
			clearTimeout(this.timer1)
		},
		methods: {
			getCateList(id = 0) {
				this.$utils.loading()
				api.get('/goods/api/product/getTypeList', {
					id
				}, {
					noHideLoading: true
				}).then(res => {
					if (id == 0) {
						this.cateList = res.data
						if (res.data && res.data.length) {
							api.get('/goods/api/product/getTypeList', {
								id: res.data[0].id
							}).then(res1 => {
								this.cataLevel2 = res1.data
							}).finally(() => {
								uni.hideLoading()
							})
						} else {
							uni.hideLoading()
						}
					} else {
						this.cataLevel2 = res.data
						uni.hideLoading()
					}
					this.$nextTick(() => {
						this.rightScrollTop = this.rightScrollTop == 0 ? -1 : 0
					})
				}).catch(() => {
					uni.hideLoading()
				})
			},
			onLeftScroll(e) {
				this.leftScrollTop = e.detail.scrollTop
			},
			handleClickLeft(item, index) {
				this.active = index
				uni.createSelectorQuery().in(this).select(`#left-item-${index}`).boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top, this.leftScrollTop, this.searchHeight);
					const blockTop = data.top + this.leftScrollTop - this.searchHeight
					this.blockTop = blockTop
					if (this.leftScrollHeight - blockTop >= this.windowHeight) {
						this.scrollLeftId = `left-item-${index}`
					}
					this.$nextTick(() => {
						this.getCateList(item.id)
					})
				}).exec()
			},
			onRightTop() {
				this.disabled = true
				this.timer = setTimeout(() => {
					clearTimeout(this.timer)
					this.disabled = false
				}, 200)
			},
			onRightBottom(e) {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				if (this.loading || this.disabled) return
				this.timer = setTimeout(() => {
					clearTimeout(this.timer)
					if (this.active < this.cateList.length - 1) {
						this.handleClickLeft(this.cateList[this.active + 1], this.active + 1)
					}
				}, 1000)
			},
			handleType(item) {
				console.log('item---', item)
				if(this.noLogin) {
					return this.$utils.modalRedirectToLogin()
				}
				uni.navigateTo({
					url: `/pages/goods/pages/search?typeId=${item.id}&typeName=${item.typeName}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
		padding-bottom: 0;
	}
</style>

<style lang="scss" scoped>
	.cate_container {
		height: 100vh;

		/deep/.uni-searchbar__box {
			justify-content: flex-start !important;
		}

		.left_item+.left_item {
			border-top: 2rpx solid #fff;
		}

		// .left_item.active {
		// 	background-color: #fff !important;
		// 	&::after {
		// 		content: '';
		// 		position: absolute;
		// 		left: 0;
		// 		width: 8rpx;
		// 		height: 32rpx;
		// 		background: $primaryColor;
		// 	}
		// }

		.active_block {
			background-color: #fff;
			position: absolute;
			transition: all 0.3s;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto 0;
				left: 0;
				width: 8rpx;
				height: 32rpx;
				background: $primaryColor;
			}
		}
	}
</style>